<template>
  <div class="entries">
    <div
      class="top-bg"
      :style="{ background: 'url(' + voteInfo.pic_url + ')  no-repeat center' }"
    ></div>
    <div class="nav-box">
      <div class="nav">
        <h1>{{ voteInfo.title }}</h1>
        <div class="part">
          <img class="title-img" src="@/assets/images/vote/title_1.png" />
          <p>
            2021全国工业APP和信息消费大赛围绕提升工业企业生产保障能力、优化工业企业核心业务运营能力、保障产业链供应链稳定安全、面向产业融合创新、工业互联网赋能技术创新应用模式5个赛题方向征集工业互联网优秀解决方案，现将100个晋级全国赛的作品进行大众投票。投票规则如下：
          </p>
          <p>1.网络投票时间：2020年11月09日08:00分-2020年12月01日18:00分；</p>
          <p>2.每个IP每天限投10票,但对一个作品每天限投1票；</p>
          <p>
            3.本次投票秉承公平公开的原则，严厉杜绝任何作弊行为或者投票作弊行为，一经发现，立刻取消本次大赛参赛资格。
          </p>
        </div>
        <div class="part">
          <img class="title-img" src="@/assets/images/vote/title_2.png" />
          <div class="part-2">
            <div class="items">
              <span>{{ voteInfo.entry_count }}</span>
              <p>参赛作品数</p>
            </div>
            <div class="items">
              <span>{{ voteInfo.user_entry_count }}</span>
              <p>累计投票数</p>
            </div>
            <div class="items">
              <span>{{ voteInfo.user_count }}</span>
              <p>累计投票人</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vote-box">
      <div class="vote">
        <img class="title-img" src="@/assets/images/vote/title_3.png" />
        <div class="vote-category">
          <div
            class="category-items"
            v-for="item in entriesCategory"
            :key="item.id"
            :class="categoryId == item.id ? 'active' : ''"
            @click="changeCategory(item.id)"
          >
            {{ item.title }}
          </div>
          <div
            class="category-items"
            :class="categoryId == 'topList' ? 'active' : ''"
            @click="changeCategory('topList')"
          >
            投票排行榜
          </div>
        </div>

        <div class="top-list-box" v-if="categoryId == 'topList'">
          <div class="vote-category top-category">
            <div
              class="category-items"
              v-for="item in entriesCategory"
              :key="item.id"
              :class="topCategoryId == item.id ? 'active' : ''"
              @click="changeTopCategory(item.id)"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="top-list" v-if="entriesList.length > 0">
            <div class="top-items" v-for="item in entriesList" :key="item.id">
              <div class="items-left">
                <div class="img-box">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.pic_url"
                    fit="cover"
                  ></el-image>
                </div>
                <div class="title-info">
                  <h2 class="one-write">{{ item.title }}</h2>
                  <p class="one-write">参赛单位：{{ item.company_name }}</p>
                  <p class="one-write">参赛团队：{{ item.team_title }}</p>
                </div>
              </div>
              <div class="items-right">
                <span>{{ item.poll_count }}</span
                >票
              </div>
            </div>
          </div>
          <div class="no-data" v-else>暂无数据哦~</div>
        </div>
        <div class="vote-list-box" v-else>
          <div class="search">
            <el-input
              v-model="keywords"
              placeholder="请输入作品名称或团队名称"
            ></el-input>
            <el-button type="primary" icon="el-icon-search" @click="getVoteList()">搜索</el-button>
          </div>
          <div class="vote-list" v-if="entriesList.length > 0">
            <div
              class="vote-items"
              v-for="(item, index) in voteList"
              :key="item.id"
            >
              <div class="items-top">
                <div class="img-box">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.pic_url"
                    fit="cover"
                  ></el-image>
                </div>
                <div class="title-info">
                  <h2 class="one-write">{{ item.title }}</h2>
                  <p class="one-write">参赛单位：{{ item.company_name }}</p>
                  <p class="one-write">参赛团队：{{ item.team_title }}</p>
                </div>
              </div>
              <div class="items-content">
                <p class="thr-write">作品简介：{{ item.content }}</p>
                <span @click="seeMore(item, index)"
                  >查看全部<i class="el-icon-right"></i
                ></span>
              </div>
              <div class="items-bottom">
                <div class="bottom-left">
                  当前票数：<span>{{ item.poll_count }}</span>
                </div>
                <div class="bottom-right" @click="changeVote(index)">
                  勾选投票
                  <div class="checkbox" :class="item.checked ? 'checked' : ''">
                    <i class="el-icon-check"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="vote-btn">
              <el-button @click="vote()">立即投票</el-button>
            </div>
          </div>
          <div class="no-data" v-else>暂无数据哦~</div>
        </div>
        <div class="page-box" v-if="entriesLastPage > 1">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="perPage"
            layout="prev, pager, next"
            :total="entriesPageTotal"
          ></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="产品详情"
      :visible.sync="isShowDetails"
      width="50%"
      class="vote-details"
    >
      <div class="items-top">
        <div class="img-box">
          <el-image
            style="width: 100px; height: 100px"
            :src="voteDetails.pic_url"
            fit="cover"
          ></el-image>
        </div>
        <div class="title-info">
          <h2 class="one-write">{{ voteDetails.title }}</h2>
          <p class="one-write">参赛单位：{{ voteDetails.company_name }}</p>
          <p class="one-write">参赛团队：{{ voteDetails.team_title }}</p>
        </div>
      </div>
      <div class="items-content">
        <p>作品简介：{{ voteDetails.content }}</p>
      </div>
      <div class="items-bottom">
        <div class="bottom-left">
          当前票数：<span>{{ voteDetails.poll_count }}</span>
        </div>
        <div class="bottom-right" @click="changeVote(checkedIndex)">
          勾选投票
          <div class="checkbox" :class="voteDetails.checked ? 'checked' : ''">
            <i class="el-icon-check"></i>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

import TopList from "./components/TopList.vue";
import WorksList from "./components/WorksList.vue";
export default {
  name: "vote",
  components: {
    TopList,
    WorksList,
  },
  data() {
    return {
      categoryId: 1,
      topCategoryId:1,
      keywords: "",
      perPage: 10,
      page: 1,
      voteList: [],
      checkedIndex: "",
      voteDetails: {},
      isShowDetails: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ...mapActions([
      "getVoteInfo",
      "getEntriesList",
      "getEntriesDetails",
      "getEntriesCategory",
      "sendEntriesVote",
    ]),
    init() {
      this.getVoteInfo();
      this.getEntriesCategory().then((res) => {
        this.categoryId = this.entriesCategory[0].id;
        this.topCategoryId = this.entriesCategory[0].id;
        this.getVoteList();
      });
    },
    
    getVoteList() {
      let data = {
        per_page: this.perPage,
        page: this.page,
        category_id: this.categoryId,
        keywords: this.keywords,
        type: 0, //排行榜排名状态:[0:否;1:是]
      };
      this.getEntriesList(data).then((res) => {
        this.voteList = this.entriesList;
        this.voteList.map((item) => {
          item.checked = false;
        });
      });
    },
    getTopList() {
      let data = {
        per_page: this.perPage,
        page: this.page,
        category_id: this.topCategoryId,
        keywords: this.keywords,
        type: 1, //排行榜排名状态:[0:否;1:是]
      };
      this.getEntriesList(data);
    },
    changeCategory(id) {
      this.categoryId = id;
      this.page = 1;
      this.keywords = "";
      if (id == "topList") {
        this.getTopList();
      } else {
        this.getVoteList();
      }
    },
    changeTopCategory(id) {
      this.topCategoryId = id;
      this.page = 1;
      this.keywords = "";
      this.getTopList();
    },
    seeMore(item, index) {
      this.voteDetails = item;
      this.checkedIndex = index;
      this.isShowDetails = true;
    },
    handleCurrentChange(currentPage) {
      this.page = currentPage;
    },
    changeVote(index) {
      this.voteList[index].checked = !this.voteList[index].checked;
      this.$forceUpdate();
    },
    vote() {
      let arry = [];
      this.voteList.map((item) => {
        if (item.checked == true) {
          arry.push(item.id);
        }
      });
      if (arry.length > 0) {
        this.sendEntriesVote({ entries_ids: arry }).then((res) => {
          this.$message({
            message: res.data.message,
            type: "success",
          });
        });
        // 走投票流程
      } else {
        // 提示
        this.$message.error("请先选择你支持的作品~");
      }
    },
  },
  watch: {
    $route(to) {},
  },
  computed: {
    ...mapGetters([
      "voteInfo",
      "entriesCategory",
      "entriesList",
      "entriesPageTotal",
      "entriesLastPage",
      "entriesDetails",
    ]),
  },
};
</script>

<style scoped>
.top-bg {
  height: 350px;
}
.nav-box {
  width: 1200px;
  margin: 20px auto;
}
.nav h1 {
  font-size: 48px;
  font-family: "宋体";
  font-weight: bold;
  color: #333333;
  line-height: 125px;
  text-align: center;
}
.nav .part {
  width: 1200px;
  border: 2px solid #0b4696;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 30px;
  margin-bottom: 60px;
}
.title-img {
  display: block;
  width: 160px;
  height: 28px;
  margin: 0 auto;
}
.part p {
  margin-top: 30px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}
.part-2 {
  display: flex;
  margin: 40px 0 30px;
}
.part-2 .items {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #666666;
}
.part-2 span {
  font-size: 60px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #0b4696;
}
.vote-box {
  padding: 40px 0;
  background: #f5f5f5;
}
.vote {
  width: 1200px;
  margin: 0 auto;
}
.vote-category {
  width: 1200px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.category-items {
  line-height: 60px;
  margin: 0 50px;
  cursor: pointer;
}
.category-items.active,
.category-items:hover {
  font-weight: bold;
  color: #0b4696;
  position: relative;
}
.category-items.active::after,
.category-items:hover::after {
  position: absolute;
  width: 100px;
  height: 2px;
  background: #0b4696;
  content: "";
  bottom: -1px;
  left: 50%;
  margin-left: -50px;
}
.search {
  margin-top: 10px;
  text-align: center;
}
.search >>> .el-input {
  width: 860px;
  margin-right: 40px;
}
.search >>> .el-button {
  width: 100px;
  height: 40px;
  background: #0b4696;
  border: none;
}
.vote-list {
  width: 1200px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.vote-items {
  width: 580px;
  background: #ffffff;
  box-shadow: 0px 10px 35px 0px rgba(242, 236, 229, 0.76);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 40px;
}
.items-top {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 20px 10px;
}
.items-top .img-box {
  width: 100px;
  height: 100px;
  background: #ecebf1;
  border-radius: 10px;
  overflow: hidden;
}
.items-top .title-info {
  flex: 1;
  margin-left: 20px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}
.items-top h2 {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #1b1b1b;
}
.items-top p {
  margin-top: 10px;
}
.items-content {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  line-height: 28px;
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px 10px;
}
.items-content p {
  height: 84px;
}
.items-content span {
  color: #0b4696;
  cursor: pointer;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  margin-top: 10px;
}
.items-bottom {
  height: 60px;
  border-top: 1px solid #dcdcdc;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 300;
  color: #333333;
}
.items-bottom span {
  color: #0b4696;
  font-weight: 500;
}
.bottom-right {
  cursor: pointer;
}
.checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  line-height: 18px;
}
.checkbox i {
  color: #fff;
  font-size: 14px;
}
.checked {
  background-color: #0b4696;
  border: 1px solid #0b4696;
}
.vote-btn {
  width: 100%;
  text-align: center;
}
.vote-btn >>> .el-button {
  width: 150px;
  height: 50px;
  background: #0b4696;
  border-radius: 4px;
  color: #fff;
  font-size: 18px;
}
.no-data {
  font-size: 16px;
  color: #999;
  text-align: center;
  height: 400px;
  line-height: 400px;
}
.top-list {
  margin-top: 20px;
}
.top-items {
  margin-bottom: 40px;
  background: #ffffff;
  box-shadow: 0px 10px 35px 0px rgba(242, 236, 229, 0.76);
  border-radius: 10px;
  width: 1200px;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.top-items .items-left {
  flex: 80%;
  display: flex;
}
.top-items .items-right {
  flex: 20%;
  text-align: right;
}
.items-left .img-box {
  width: 100px;
  height: 100px;
  background: #ecebf1;
  border-radius: 10px;
  overflow: hidden;
}
.items-left .title-info {
  flex: 1;
  margin-left: 20px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}
.items-left h2 {
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #1b1b1b;
}
.items-left p {
  margin-top: 10px;
}
.items-right {
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #333;
  line-height: 100px;
}
.items-right span {
  color: #0b4696;
}
.vote-details >>> .el-dialog {
  min-width: 1000px;
}
.vote-details >>> .el-dialog__body {
  padding: 0;
}
.vote-details .items-top {
  border-top: 1px solid #dcdcdc;
}
.vote-details .items-content p {
  height: auto;
  min-height: 56px;
}
</style>